<div class="login-wrapper background">
    <form class="login" #loginForm="ngForm">
        <section class="title">
            <h3 class="welcome">{{'APP_LOGIN_TITLE_WELCOME'|translate}}</h3>
            <span *ngIf="!theme||!theme.systemName">
                {{'APP_LOGIN_TITLE_KO'|translate}}
            </span>
            <span *ngIf="theme&&theme.systemName">
                {{theme.systemName}}
            </span>
        </section>
        <div class="login-group">
            <clr-input-container>
                <label class="clr-sr-only">{{'APP_USERNAME'|translate}}</label>
                <input type="text" name="username" clrInput placeholder="Username"
                       [(ngModel)]="loginCredential.username"
                       required/>
            </clr-input-container>
            <clr-password-container>
                <label class="clr-sr-only">{{'APP_PASSWORD'|translate}}</label>
                <input type="password" name="password" clrPassword placeholder="Password"
                       [(ngModel)]="loginCredential.password" required/>
            </clr-password-container>
            <clr-select-container>
                <label class="clr-sr-only">{{'APP_SYSTEM_LANGUAGE'|translate}}</label>
                <select clrSelect [(ngModel)]="loginCredential.language" name="provider" required>
                    <option value='zh-CN' selected>{{'APP_SYSTEM_LANGUAGE_CN'|translate}}</option>
                    <option value='en-US'>{{'APP_SYSTEM_LANGUAGE_US'|translate}}</option>
                </select>
            </clr-select-container>
            <div *ngIf="isError" class="error active">
                {{message}}
            </div>
            <app-modal-alert></app-modal-alert>
            <button type="submit" class="btn btn-primary" (click)="login()"
                    [disabled]="loginForm.invalid">{{'APP_LOGIN'|translate}}</button>
        </div>
    </form>
</div>
